<template>
    <div class="header">
        <h1>我是header</h1>
        <p>Count的值是{{count}}</p>
        <p>价格是{{price}}</p>
        <button @click="increment">累加</button>
        <button @click="incrementN({n:5})">每次累加n</button>
        <h2>电影的总数是{{movieList.length}}</h2>
    </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
// 使用数据的第一种方式：this.$store.state.数据名称
/* 第二种方式（计算属性方式）：
computed: {
    count() {
        return this.$store.state.count;
    },
}
*/
/*
第三种方式：mapState方式 它可以帮我们把state中的数据读出来，并生成对应的计算属性
 mapState获取到的是一个对象，而计算属性是一个对象，对象中应是键值对的形式，所以需要把mapState解构出来
computed: {
    //数组式写法
    ...mapState(["count"]),
    //对象式写法,如果需要给计算属性另外取一个名字，就可以使用对象式写法
  ...mapState({ count: "count" }),
}

*/ 

//使用mutation的方式
/* 第一种：直接使用
methods: {
    increment() {
        this.$store.commit("add");
    },
}*/
/*
第二种：使用mapMutations（mapMutations用于帮助我们把Mutation中的方法读出来，生成对应的methods方法）
methods: {
    //数组式写法
    ...mapMutations(["add", "addN"]),
    //对象式写法
    ...mapMutations({ add: "add", addN: "addN" }),
}

*/


export default {
    name:"Header",
    mounted(){
        // console.log(this)
        // console.log(mapState(["count","price"]))//这个获取到的是count和price的计算属性函数组成的对象
        // console.log(mapState(["count","price"]).count())
        //通过.count拿到count计算属性函数，调用这个函数就是执行计算属性函数中return的那句话，return this.$store.state.count，发现会报错，错误内容是this.$store为undefined,所以需要把this修改为组件实例再调用
        // console.log(mapState(["count","price"]).count.call(this))
    },
    computed:{
        // count(){
        //     return this.$store.state.count
        // },
        // price(){
        //     return this.$store.state.count

        // }
        // 注意***：之前没有模块化时，虽然使用的是辅助函数但本质我们是通过this.$store.state.count获取到state中的值的
        // 模块化之后，this.$store上只有count这个模块了，所以需要在辅助函数的第一个参数加上模块的名称
        ...mapState("count",["count","price","movieList"])
    },
    methods:{
        // 第一种方法
        // increment(){
        //     this.$store.commit("increment")
        // }
        // 第二种方法
        ...mapMutations("count",["increment", "incrementN"])
    }
}
</script>

<style>
.header{
    background-color: skyblue;
    text-align: center;
}
</style>